<template>
  <div class="category">
  <item :title="foods.title">
    <img src="https://s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
  </item>
  <item :title="games.title">
    <ul>
      <li v-for="(game,index) in games.list " :key="index">{{game}}</li>
    </ul>
  </item>
  <item :title="films.title">
    <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls> </video>
  </item>
  </div>
</template>

<script>
import Item from "./Item";
export default {
  name: "Category",
  components:{Item},
  data(){
    return {
      foods:{list:["火锅","烧烤","小龙虾","牛排"],title:"美食"},
      games:{list:["红色警戒","穿越火线","劲舞团","超级玛丽"],title:"游戏"},
      films:{list:["教父",'拆弹专家','你好,李焕英','尚硅谷'],title:"电影"},
    }
  }
}
</script>

<style scoped lang="less">
  .category{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>
